<template>
  <div class="playing-l-s" @click.stop="$emit('change-song-from-list', item)">
    <div
      v-if="song?.id === item?.id"
      class="icon-rhythm"
      :class="{ paused: paused }"
    >
      <span></span>
      <span></span>
      <span></span>
    </div>

    <div class="s-name" :class="{ active: song.id === item.id }">
      <span class="song-name f-thide">{{ item.name }}</span>
      <span class="singers-name f-thide">
        <span> - </span>
        <span v-for="(ar, i) in item?.ar || item?.artists" :key="i"
          >{{ ar.name }}
          {{ i === (item.ar.length || item.artists.length) - 1 ? "" : "/" }}
        </span>
      </span>
    </div>

    <div class="btn-del" @click.stop="$emit('del-song-from-list', item)">
      <i class="iconfont icon-shanchu2"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item", "song", "paused"],

  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {},
};
</script>
<style lang='scss' scoped>
@keyframes rhythm {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0.2);
  }
}

.playing-l-s {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;

  .icon-rhythm {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    width: 16px;
    height: 20px;

    span {
      width: 20%;
      height: 85%;
      border-radius: 25%;
      background-color: red;
      transform-origin: bottom;
      animation: rhythm 0.4s infinite linear alternate;

      &:nth-child(1) {
        height: 65%;
        animation-delay: 0.1s;
      }

      &:nth-child(2) {
        height: 100%;
        animation-delay: 0.2s;
      }
    }

    &.paused span {
      animation-play-state: paused;
    }
  }

  .s-name {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;

    height: 22px;
    margin-left: 5px;

    font-size: 16px;
    color: #333;

    .singers-name {
      margin-left: 3px;
      font-size: 12px;
      color: #999;
    }

    &.active,
    &.active .singers-name {
      color: red;
    }
  }

  .btn-del {
    width: 20px;
    height: 20px;
    color: #999;
    font-size: 18px;
  }

  .f-thide {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
</style>